<template>
  <div class="signin">
    <div class="signinpanel">
      <div class="left">
        <img src="@/assets/images/cadre.png" class="logo" alt="">
        <h2>欢迎使用 Cadre UC 系统</h2>
      </div>
      <div class="right">
        <div class="form_item">
          <h4>登录：</h4>
          <input type="text" class="ipt username" v-model="username">
          <input type="password" class="ipt password" v-model="password">
          <div class="checkbox_box" @click="rememberme">
            <span class="iconfont" :class="isRemenber?'icon-duoxuankuang1':'icon-duoxuankuang'"></span>
            <span class="rememberme">记住我</span>
          </div>
          <p class="btn" @click="login">登录</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isRemenber:false,// 记住我
      username:'', // 用户名
      password:'', // 密码
    }
  },
  methods: {
    // 是否记住密码
    rememberme() {
      this.isRemenber = !this.isRemenber
    },
    // 登录
    login() {
      let username = this.username.trim()
      let password = this.password.trim()
      if (username == '') {
        this.$message('账号不能为空')
      } else if (password == '') {
        this.$message('密码不能为空')
      } else {
        window.localStorage.setItem('cadreuc_uid',new Date().getTime().toString())
        this.$router.push('/')
      }
    }
  }
}
</script>

<style lang='stylus' scoped>
  .signin
    height 100%
    background: url('~@/assets/images/bg1.jpg') no-repeat center center
    background-size: cover
    display: flex
    align-items: center
    justify-content: center
    .signinpanel
      width: 50%
      margin 0 auto
      display: flex
    .left
      flex 3
      min-width: 0
      padding-top 20px
      text-align: center
      .logo
        width: 440px
      h2
        color #fff
        font-size 30px
        margin-top 20px
    .right
      width: 400px
      background:rgba(255,255,255,.2)
      border 1px solid rgba(255,255,255,.3)
      padding 30px
      border-radius: 3px
      box-sizing: border-box
      h4
        color #fff
        font-weight: 600;
        font-size 14px
      .ipt
        width: 100%
        height: 34px
        margin-top 20px
        outline: none
        padding 0 40px 0 10px
        box-sizing: border-box
        border 1px solid #fff
        font-size 14px
        &:focus
          border-color #1c84c6
        &.username
          background #fff url('~@/assets/images/user.png') 95% center no-repeat
          background-size: 15px 15px
        &.password
          background #fff url('~@/assets/images/locked.png') 95% center no-repeat
          background-size: 15px 15px
      .checkbox_box
        margin 20px 0
        color #fff
        font-size 14px
        display: flex
        align-items: center
        cursor pointer
        .iconfont
          margin-right 6px
      .btn
        width: 100%
        height: 30px
        text-align: center
        line-height 30px
        color #fff
        background #1c84c6
        cursor pointer
</style>
